
		
function getRemainingTimeMessage(time){
	var messageBegin = "";
	var messageEnd = " late";
	
	return messageBegin + getMessageFromTime(time) + messageEnd;
}
		
function init(){
	$('#main').empty();
	var watchedElement = storageGet('watchedElement');
	if(watchedElement && watchedElement != ""){
		$('#main').removeClass('text');
		$('#main')
			.append(getOptionTextArea(watchedElement + '-postit', "")
				.addClass('textarea'));
	} else {
		$('#main').addClass('text');
		if(storageGet('elementList') != ""){
			var isEmpty = true;
			$.each(
				storageGet('elementList').split('|'),
				function(intIndex, element){
					var section = getSection(element);
					$('#main').append(section);
					if(section != ""){
						isEmpty = false;
					}
				}
			);
			if(!isEmpty){
				$('#main').append($('<br/>'));
			}
		}
		$('#main')
			.append($('<div></div>')
				.attr("id","remindOption")
				.append($('<div></div>')
					.addClass('little')
					.text('reminds current website')
					.addClass('option')
					.click(function(){
						var tabUrl = "";
						chrome.tabs.getSelected(null,function(tab){
							tabUrl = tab.url;
							process();
						});
						var process = function(){
							if(!$('#main').text().contains("Name :")){
								var frequency = $('<select></select>')
									.attr("id","frequency");
								setOptionFrequency(frequency);
								$('#remindOption')
									.append($('<div></div>')
										.addClass('little')
										.append($('<span></span>')
											.text('Name :'))
										.append($('<input type="text" value="' + extractNameFromUrl(tabUrl) + '"/>')
											.addClass('name')
											.attr("id", "name")
											.attr("maxlength", NAME_MAXLENGTH))
									.append($('<div></div>')
										.addClass('little')
										.append($('<span></span>')
											.text('Frequency :'))
										.append(frequency)
										.append($('<span></span>')
											.addClass('littlebutton')
											.text("OK")
											.click(function(){
												var name = $('#name').val();
												var frequency = $('#frequency').val();
												if(createElement(name, frequency, tabUrl)){
													storageSet('watchedElement', name);
													chrome.extension.sendRequest({type: "setWatch"}, function(response) {});
													init();
													notify();
												}
											}))));
							}
						};
					})));
	}
}

function getSection(element){
	var time = getRemainingTime(element);
	if(time < (MILLISECONDS)){
		return "";
	} else {
		return $('<div></div>')
		.append($('<span></span>')
			.append($('<a></a>')
				.addClass('link')
				.attr('href', storageGet(element + '-url'))
				.attr('target', '_blank')
				.text(element)))
		.append("&nbsp;")
		.append($('<span></span>')
			.attr('id', element + 'label')
			.addClass('label')
			.text(getRemainingTimeMessage(time)))
		.append($('<img src="delete_popup.gif" />')
			.addClass('deletePopup')
			.click(function (){
				saveModifiedDate(element);
				init();
			}));				
	}
}
		